<!DOCTYPE html>
<html lang="zh-cn" xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta name="format-detection" content="telephone=no">
	<meta http-equiv="x-rim-auto-match" content="none">
	<title>海苔君</title>
	<style>
		*{margin:0;padding:0;-webkit-tap-highlight-color: transparent;-webkit-touch-callout:none;
			-webkit-user-select:none;}
		body{font-size:12px;} a{text-decoration: none;color:#000;} .pl10{padding-left:10px;}
		.g6{color:#666;} .mt10{margin-top:10px;} .mt20{margin-top:20px;}
		.gray-bg{background-color:#f6f6f6;} .tc{text-align:center;} .pb20{padding-bottom:20px;} .dn{display:none;}
		.setting-input {
			border-bottom: 1px solid #c8c7cc;
		}
		.setting-input li {
			margin: 0 10px;
			border-bottom: 1px solid #e2e2e2;
		}
		.setting-input li:last-child {
			border: 0;
		}
		.inputs {
			background-color: #fff;
			border-top: 1px solid #c8c7cc;
		}
		input,button,select,textarea{outline:none;-webkit-appearance: none;  }
		.inputs li {
			height: 40px;
			border-bottom: 1px solid #c8c7cc;
			font-size: 14px;
			line-height: 40px;
			padding-left: 10px;
			padding-right: 10px;
			list-style: none;
		}
		.inputs .input-line{
			height:50px;line-height:50px;
		}
		.inputs a{display:block;width:100%;height:40px;}
		.inputs .on{background:url("images/gou.png") right center no-repeat;background-size:13px 11px;}
		.inputs li span {
			float: left;
		}
		.inputs li div {
			padding-left: 65px;
		}
		.inputs input {
			width: 100%;
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			height: 30px;border:1px solid #ccc;
			padding:0 3px;
			background:none;
		}
		.inputs textarea {
			width: 100%;box-sizing: border-box;
			-webkit-box-sizing: border-box;
			border:1px solid #ccc;margin-top:10px;height:70px;padding:0 3px;
		}
		.inputs .desc{height:90px;}
		.border-btn {
			display: inline-block;
			width: 170px;
			height: 36px;
			line-height: 36px;
			border-radius: 18px;
			-webkit-border-radius: 18px;
			color: #999;
			padding-left: 10px;
		}
		.pub-btn {
			font-size: 14px;
			background-size: 15px 15px;
			background-color: #ffd200;
			color: #333; text-align:center;
		}
		.result-success{padding:30px 20px 0;text-align:center;}
		.tip-wz{font-size:14px;color:#666;line-height:24px;}
	</style>
	<script src="js/lib/jquery-2.1.1.min.js"></script>
</head>

<body class="gray-bg">
<div id="writePage">
	<p class="mt10 g6 pl10">请选择投诉原因</p>
	<ul class="inputs mt10 setting-input" id="selectReason">
		<li><a href="javascript:;">欺诈</a></li>
		<li><a href="javascript:;">色情</a></li>
		<li><a href="javascript:;">政治谣言</a></li>
		<li><a href="javascript:;">常识性谣言</a></li>
		<li><a href="javascript:;">诱导分享</a></li>
		<li><a href="javascript:;">恶意营销</a></li>
		<li><a href="javascript:;">隐私信息收集</a></li>
		<li><a href="javascript:;">抄袭公众号文章</a></li>
		<li><a href="javascript:;">其他侵权类（冒名、诽谤、抄袭）</a></li>
		<li><a href="javascript:;">违规声明原创</a></li>
	</ul>
	<ul class="inputs mt10 setting-input">
		<li class="input-line">
			<span>联系方式</span>
			<div>
				<input type="text" class="input" id="phone" placeholder="手机号、邮箱、QQ号"/>
			</div>
		</li>
		<li class="desc">
			<span>描述</span>
			<div>
				<textarea placeholder="写点你投诉的理由呗" id="summary"></textarea>
			</div>
		</li>
	</ul>
	<div class="bottom-btn pt10 tc pb20">
		<div class="mt10 tc" id="container">
			<a href="javascript:;" class="border-btn mt10 pub-btn" id="pubBtn">提交</a>
		</div>
	</div>
</div>
<div id="resultPage" class="result-success dn">
	<div>
		<img src="images/success_icon.png" width="96" />
	</div>
	<h3 class="mt20 f16">投诉成功</h3>
	<p class="mt20 tip-wz">感谢您的参与，海苔君坚持反对色情、暴力、欺诈等违规信息，我们会认真处理您的投诉，维护绿色、健康的网络环境。</p>
	<div class="bottom-btn pt10 tc pb20">
		<div class="mt20 tc">
			<a href="javascript:;" class="border-btn mt20 pub-btn" id="back">确定</a>
		</div>
	</div>
</div>
<script>
	//var HOST = 'http://office.huo.so:9999/hitgou',
	var HOST = 'http://api.haitai.huo.so/hitgou',
			postData = {};

	$('#selectReason a').click(function(){
		$('.on').removeClass('on');
		$(this).addClass('on');
	});

	function getUrlValue(name)//获取URL参数
	{
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
		if(window.location.search.substr(1).match(reg))
		{
			arr=window.location.search.substr(1).match(reg);
			return decodeURIComponent(arr[2]);
		}
	}

	$('#pubBtn').click(function(){
		if($('.on').length == 0){
			alert('请选择投诉原因撒');
			return false;
		}

		var content = $('#summary').val();
		var text = $('.on').text();
		var id = getUrlValue('id') || '';
		content = content ? text + '|' + content : text ;

		postData = {
			content : content,
			contact : $('#phone').val() ,
			targetType : 'ARTICLE', //现在默认是文章类型
			targetId : id //如文章ID
		};

		$.ajax({
			url : HOST + '/system/report/save',
			data : postData,
			dataType : 'jsonp',
			success : function(json){
				$('#writePage').hide();
				$('#resultPage').show();
			},
			error : function(){
				alert('提交失败，请重试');
			}
		})
	})
	$('#back').click(function(){
		if(/mrht/.test(navigator.userAgent)){
			window.location.href = 'mrht://invokeApp?type=back';
		}else{
			window.history.go(-1);
		}
	});
</script>
</body>
</html>
